<template>
    <el-row class="main">

        <el-col class="padd20 posa box box-tb btn">
            <el-row class="box box-pack-end" v-if="maxRole !='cmo'">
                <!-- <el-button class="reset-comfirm-btn practice" @click="showcous()">引用</el-button> -->
            </el-row>
            <el-row :gutter="20" class="padd20 " style="height: calc(100% - 40px);margin-top: 40px;"
                v-if="cousList.length != 0">
                <el-col :span="24">
                    <el-col :xs="4" :sm="6" :md="6" :lg="6" :xl="5" class="col-list cp mb20 minwith200"
                        v-for="(item, index) in cousList" :key="index" @click.native="goCourse(item)">
                        <div class="grid-content bg-purple">
                            <el-image :src="item.image" class="img" fit="cover" style="width: 100%;">
                                <div slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                            </el-image>
                            <div class="delete" v-if="maxRole =='cmo'" @click.stop="handleDelete(item.id)">删除</div>
                            <el-col class="tl course-name" :title="item.name">
                                {{ item.name }}
                            </el-col>
                            <el-col class="tl">
                                <span style="width: 180px;font-size: 14px;">主编：{{ item.chiefEditor
                                }}</span>
                            </el-col>
                        </div>
                    </el-col>
                </el-col>
                <el-col :span="24">
                    <el-pagination @current-change="handleCurrentChange" :current-page="ipagination.current"
                        ayout="prev, pager, next" :total="ipagination.total" hide-on-single-page>
                    </el-pagination>
                </el-col>
            </el-row>
            <el-row class="height100 box box-pack-center box-align-center" style="width: 100%;" v-else>
                <el-empty description="暂无劳动课程" image="../../../static/image/nodata/nodata.png"></el-empty>
            </el-row>
        </el-col>
        <selectCous :dialogVisible="showcouslist" @clickClose="closecouslist()" title="选择课程" ref="clist"
            @saveCous="saveCous">
        </selectCous>
    </el-row>
</template>

<script>
    import {
        getActionV3
    } from '@/http/axios.js'
    import selectCous from './components/couslist.vue';
    export default {
        components: {
            selectCous
        },
        data() {
            return {
                cousList: [],
                cyList: [],
                info: {},
                jyzList: [],
                loginInfo: this.$store.state.loginInfo,
                schoolid: this.$store.state.schoolId,
                maxRole: this.$store.state.maxRole,
                showcouslist: false,
                addStyle: {
                    position: 'absolute',
                    right: '20px'
                },
                url: {
                    list: '/cous/public/fast'
                },
                ipagination: {
                    total: 0,
                    rows: 8,
                    page: 1,
                    current: 1
                }
            };
        },
        created() {
            this.listLdkc();
        },
        methods: {
            listLdkc() {
                let params = Object.assign({}, this.ipagination)
                getActionV3(this.url.list, params).then(res => {
                    if (res.code === 200) {
                        this.cousList = res.data.records;
                        this.ipagination.total = res.data.total
                        // console.log(this.cousList,'this.cousListthis.cousListthis.cousList-----')
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            handleCurrentChange(val) {
                this.ipagination.current = val
                this.listLdkc()
            },
            goCourse(item) {
                localStorage.setItem('ldkc', JSON.stringify(item))
                this.$router.push({
                    path: '/publicCourseDetail'
                })
            },
            saveCous(cous) {
                console.log(cous, 'cous///////')
                this.$confirm('确定将【' + cous.name + '】添加到课程管理吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.3)'
                    });
                    let url = '/ycous/copyCousToSchool';
                    let params = {
                        cousid: cous.id,
                        schoolid:this.schoolid
                    };
                    this.$ajax.post(url, params).then(res => {
                        loading.close();
                        if (res.code == 0) {
                            this.$message.success('添加成功')
                        } else {
                            this.$message.error(res.code)
                        }
                    })
                }).catch(() => {})


            },
            //删除公共课程
            handleDelete(id) {
                let arr = []
                arr.push(id)
                this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.wyv3.deletePublicCourseById({
                        id: arr.toString()
                    }).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.listLdkc()
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                        }
                    })
                }).catch();

            },
            showcous() {
                this.$refs.clist.getCourseList();
                this.showcouslist = true;
            },
            closecouslist() {
                this.showcouslist = false;
            }
        }
    };
</script>

<style scoped lang="scss">
    .el-button {
        padding: 7px 20px !important;
        font-size: 12px !important;
    }

    .ym,
    .sf {
        width: 120px;
    }

    .sf {
        text-align: right;
    }

    /deep/.jy-team[data-v-02e60b38] {
        overflow-y: initial;
    }

    /deep/ .fofnk {
        width: 100%;
        padding-left: 12px;
        text-align: left;

        >.num {
            display: inline-block;
            font-size: 12px;
            width: 20px;
        }

        >.checkStyle {
            >.el-checkbox__input {
                padding-top: 27px;
            }
        }
    }

    /deep/.el-checkbox {
        margin-right: 0 !important;

        >.el-checkbox__input {
            padding-bottom: 30px !important;
        }
    }

    /deep/.el-checkbox__input {
        margin-bottom: 0 !important;
    }

    /deep/ .team::-webkit-scrollbar {
        height: 0 !important;
    }

    .main-cont {
        height: 100%;
        overflow-y: auto;
    }

    .el-row {
        &:last-child {
            margin-bottom: 0;
        }
    }

    .col-list {
        border-radius: 12px;
    }

    .bg-purple {
        background-color: #fafbff;
        transition: .3s ease-in-out;
    }

    .bg-purple:hover {
        box-shadow: 2px 6px 13px 0px rgba(128, 130, 139, 0.9);
    }

    .el-plus {
        display: inline-block;
        width: 32px;
        height: 32px;
        line-height: 32px;
        background: linear-gradient(-13deg, #626BF1, #989BFA);
        border-radius: 16px;
        color: #fff;
        font-size: 26px;
        font-style: normal;
    }

    .border {
        border: 1px dotted #BEBDE6;
        min-width: 200px;
        border-radius: 12px;
        height: 300px;
        overflow: hidden;

        &:hover {
            border: 1px dotted #626bf1;
            color: #626BF1;
        }
    }

    .grid-content {
        position: relative;
        padding-bottom: 10px;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #f7f9fd;
        // margin-right: 20px;
        color: #21537e;

        &:hover {
            .delete {
                display: block;
            }
        }

        .img {
            height: 150px;
        }

        .course-name {
            font-size: 16px;
            font-weight: bold;
            width: 70%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .course-info {
            span {
                color: #888F9E;
            }
        }

    }

    .minwith200 {
        // margin-right:10px;
        min-width: 200px;
    }

    .jy-team {
        position: relative;
        min-width: 260px;
        // height: 600px;
        background-color: #fff;
        overflow-y: auto;
        box-shadow: 1px 3px 9px 0px rgba(176, 181, 191, 0.4);


        .add-btn {
            width: 65px;
            display: flex;
            justify-content: space-between;
            color: #626BF1;
            font-weight: 600;

            .el-icon-plus {
                font-weight: 600;
            }

            >span {
                display: block;
            }
        }

        .user-name {
            width: 140px;

            .es-width {
                text-align: left;
                width: 80px;
                overflow: hidden;
            }
        }

        .role {
            min-width: 110px;
            text-align: center;

        }
    }

    .chiefEditor {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 120px;
        text-align: right;
    }

    .main {
        position: relative;
        height: 100%;
    }

    .posa {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        overflow-y: auto;
        background-color: #fff;

        h3 {
            font-size: 18px;
        }

        .label {
            display: block;
            width: 76px;
            height: 40px;
            line-height: 40px;
            font-weight: 600;
            font-size: 15px;
            margin-right: 10px;
        }

        .btn {
            display: flex;
        }
    }

    .addbtn {
        position: absolute;
        right: 100px;
        z-index: 1000;
    }

    .delete {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        width: 60px;
        height: 20px;
        line-height: 20px;
        background-color: rgba(254, 0, 0, .7);
        color: #fff;
        border-radius: 3px;
        font-size: 14px;
    }
</style>
